<template>
  <el-tooltip v-bind="getParams">
    <slot></slot>
  </el-tooltip>
</template>
<script lang="ts" setup>
import type { Placement } from "element-plus";

const defaultTooltipContent = ref("");

const props = withDefaults(
  defineProps<{
    content?: string; //显示的内容
    placement?: Placement; //Tooltip 组件出现的位置
    autoShow?: boolean; //开启后，首次移入时，判断是否溢出，再动态决定是否提示
  }>(),
  {
    placement: "top",
  }
);

const getParams = computed(() => {
  const { placement } = props;
  return {
    placement,
    content: props.content ?? defaultTooltipContent.value,
  };
});

const slots = useSlots();

// 自动获取提示内容
function autoGetTipContent() {
  // 如果传递了 content ，则不自动获取插槽内容
  if (typeof props.content === "string") return;

  const slotsContentTree = slots.default!();
  getContent(slotsContentTree);
  function getContent(arr: any[]) {
    const queue = [...arr]; //创建队列
    while (queue.length > 0) {
      const item = queue.shift();
      if (typeof item?.children === "string") {
        defaultTooltipContent.value += item.children;
      } else if (Array.isArray(item?.children)) {
        queue.push(...item.children);
      }
    }
  }
}

onMounted(() => {
  // 没有插槽的情况
  if (!slots.default) {
    console.error("该组件需要有一个根节点作为默认插槽");
  }
  const slotsContentTree = slots.default!();

  // 插槽大于1个的情况
  if (slotsContentTree.length > 1) {
    console.error("该组件的默认插槽应该为一个根节点，且只能有一个根节点", {
      插槽内容: slotsContentTree,
      插槽根节点长度: slotsContentTree.length,
    });
  }
  autoGetTipContent();
});
</script>
